<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.Div_CarouseImage {
				overflow: hidden;
			}

			.CarouseImageBackground>div {
				background-position: center;
				background-size: cover;
			}


			.CarouseImageBackground {
				background-color: red;
				height: 100%;
				display: flex;
				margin-left: ;
				transform: translateX(0px) translateZ(0px);
			}

			.CarouseImage {
				height: 100%;
			}

			.SwitchImage {
				position: relative;
				width: 100%;
				height: 100px;
				left: 0;
				top: -100px;
				display: flex;
				justify-content: space-between;
			}

			.SwitchImage div {
				width: 50px;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				cursor: pointer;
			}

			.SwitchImage div:first-child {
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
			}

			.SwitchImage div:last-child {
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
			}

			.SwitchImage span {
				color: aliceblue;
				font-size: 50px;
				line-height: 90px;
				text-align: center;
				display: block;
			}

			.CarouseSelectImage {
				position: relative;
				top: -130px;
				left: 0;
			}

			.CarouseSelectImage ul {
				display: flex;
				list-style: none;
			}

			.CarouseSelectImage li {
				/* background-color: rgba(128, 128, 128, 0.9); */
				margin-left: 10px;
				width: 15px;
				height: 15px;
				border-radius: 20px;
				border: 3px solid rgba(0, 0, 0, 0.8);
				cursor: pointer;
				box-shadow: #000000 0px 0px 10px 0px;
			}
			.CarouseSelectImage li:first-child{
				border: 3px solid rgba(255, 0, 0, 0.8);
				box-shadow: rgba(255, 0, 0, 0.8) 0px 0px 10px 0px;
			}


			/* ↓更改项↓ */
			.Div_CarouseImage {
				/* 轮播图的宽高 */
				width: 1200px;
				height: 600px;

				margin-top: 100px;
				margin-left: 100px;
				border-radius: 20px;
				box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px 0px;
			}

			.CarouseImageBackground {
				/* 当前轮播图的总张数(包括重复) * 100% */
				width: 600%;
			}

			.CarouseImage {
				/* .CarouseImageBackground的width / 当前轮播图的总张数(包括重复) */
				width: 20%;
			}

			/* ↑更改项↑ */
		</style>
	</head>
	<body>

		<div class="Div_CarouseImage">
			<div class="CarouseImageBackground">
				<div class="CarouseImage" style="background-image: url(image/image01.jpg);"></div>
				<div class="CarouseImage" style="background-image: url(image/image02.jpg);"></div>
				<div class="CarouseImage" style="background-image: url(image/image03.jpg);"></div>
				<div class="CarouseImage" style="background-image: url(image/image04.jpg);"></div>
				<div class="CarouseImage" style="background-image: url(image/image05.png);"></div>
				<!-- 注意最后一个是相同的 -->
				<div class="CarouseImage" style="background-image: url(image/image01.jpg);"></div>
			</div>
			<div class="SwitchImage">
				<div>
					<span>&lt;</span>
				</div>
				<div>
					<span>&gt;</span>
				</div>
			</div>
			<div class="CarouseSelectImage">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>

		<script src="./script/jquery-3.5.1.js"></script>
		<script src="./script/popmotion.global.min.js"></script>
		<script>
			$(function() {

				var imageWidth = $(".CarouseImage").width();
				var allWidth = $(".CarouseImageBackground").width();
				var imagePlayindex = 0;
				var allImageCount = $(".CarouseImage").length;
				var mobileSpeed = 1000; //滚动时间
				var OutSpeed = 3000; //播放时间


				//动画初始
				const {
					keyframes,
					easing,
					tween,
					styler
				} = popmotion;
				const ballStyler = styler(document.querySelector(".CarouseImageBackground"));


				//选择张数(到此为止)
				$(".CarouseSelectImage li").click(function() {
					//重启计时器
					RebootTimer();
					var index = $(this).index();

					EditCarouseSelect(this);

					console.log("当前下标:" + index)
					imagePlayindex = index;

					var currLeft = $(".CarouseImageBackground").css("marginLeft");

					var oldMobile = parseInt(currLeft);
					var newMobile = -imageWidth * imagePlayindex;
					console.log("oldMobile:" + oldMobile);
					console.log("newMobile:" + newMobile);
					//动画函数
					keyframes({
						values: [{
								marginLeft: oldMobile
							},
							{
								marginLeft: newMobile
							}
						],
						easings: easing.linear,
						duration: mobileSpeed,
					}).start(ballStyler.set);
				});

				//编辑下标
				function EditCarouseSelect(div) {
					//清除全部下标
					$(".CarouseSelectImage li").css({
						"border": "3px solid rgba(0, 0, 0, 0.8)",
						"box-shadow": "rgba(0, 0, 0, 0.8) 0px 0px 10px 0px"
					});
					$(div).css({
						"border": "3px solid rgba(255, 0, 0, 0.8)",
						"box-shadow": "rgba(255, 0, 0, 0.8) 0px 0px 10px 0px"
					});
				}

				//切换张数的按钮位置处理
				var SwitchImageHeight = $(".SwitchImage").height();
				var CarouseImageHeight = $(".CarouseImage").height();
				$(".SwitchImage").css("top", -(CarouseImageHeight + SwitchImageHeight) / 2);

				//上一张按钮
				$(".SwitchImage div:eq(0)").click(function() {
					//重启计时器
					RebootTimer();
					PreviousImage();
				})
				//下一张按钮
				$(".SwitchImage div:eq(1)").click(function() {
					//重启计时器
					RebootTimer();
					NextImage();
				})

				//重启计时器
				function RebootTimer() {
					clearInterval(carouseImageTimer);
					carouseImageTimer = setInterval(function() {
						NextImage();
					}, OutSpeed + mobileSpeed);
				}
				//定时跳转
				var carouseImageTimer = setInterval(function() {
					NextImage();
				}, OutSpeed + mobileSpeed);

				//上一张跳转函数
				function PreviousImage() {
					if (imagePlayindex % allImageCount == 0) {
						console.log("chuaf")
						$(".CarouseImageBackground").css("marginLeft", -allWidth + imageWidth)
						imagePlayindex = 5;
					}
					if (imagePlayindex == 0) {
						imagePlayindex = 5;
					}
					imagePlayindex--;
					var currLeft = $(".CarouseImageBackground").css("marginLeft");

					var oldMobile = parseInt(currLeft);
					var newMobile = -imageWidth * (imagePlayindex % allImageCount);

					//动画函数
					keyframes({
						values: [{
								marginLeft: oldMobile
							},
							{
								marginLeft: newMobile
							}
						],
						easings: easing.linear,
						duration: mobileSpeed,
					}).start(ballStyler.set);
					
					console.log(imagePlayindex % allImageCount)
					
					var index = imagePlayindex % allImageCount;
					if (index == 5)
						index = 0;
					EditCarouseSelect($(".CarouseSelectImage li").eq(index));
				}
				//下一张跳转函数
				function NextImage() {
					if (imagePlayindex % allImageCount == allImageCount - 1) {
						$(".CarouseImageBackground").css("marginLeft", "0px");
						imagePlayindex++;
					}
					imagePlayindex++;
					var currLeft = $(".CarouseImageBackground").css("marginLeft");

					var oldMobile = parseInt(currLeft);
					var newMobile = -imageWidth * (imagePlayindex % allImageCount);

					//动画函数
					keyframes({
						values: [{
								marginLeft: oldMobile
							},
							{
								marginLeft: newMobile
							}
						],
						easings: easing.linear,
						duration: mobileSpeed,
					}).start(ballStyler.set);

					var index = imagePlayindex % allImageCount;
					if (index == 5)
						index = 0;
					EditCarouseSelect($(".CarouseSelectImage li").eq(index));
				}
			})
		</script>
	</body>
</html>
